<script setup lang='ts'>
import { useBUnderwritingPricing } from "./hooks/BUnderwritingPricing";
import { PureTableBar } from "@/components/RePureTableBar";
const {
  rules,
  columns,
  loading,
  AddRules,
  dataList,
  columns2,
  loading2,
  dataList2,
  btnloading,
  pagination,
  insDisabled,
  DialogVisible,
  insuranceForm,
  Refstubim_from,
  AddInsuranceForm,
  SeleteSecurityItem,
  SecurityItemVisible,
  SeleteInsuranceType,
  SeletePremiumOption,
  RefAddInsuranceForm,
  isinsuranceOutTime,
  SeleteInsuranceCoverage,
  changeInsuranceCoverage,
  changeSeleteSecurityItem,
  StubimRefAddInsuranceForm,
  closeRefAddInsuranceForm,
  handleCurrentChange,
  changeinsuranceType,
  AddInsuranceList,
  handleSizeChange,
  stubim_from,
  ViewDetails,
  InsuranceData,
  DeleteDetails,
  close_from
} = useBUnderwritingPricing()
</script>

<template>
  <div class="main">
    <PureTableBar title="保险列表" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="InsuranceData()">保险设计</el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
          size="small" :data="dataList" max-height="650" :columns="columns" :checkList="checkList"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :pagination="pagination"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' size="small" text @click="ViewDetails(row)"> 查看 </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <!-- 保险公司-承保定价 -->

    <ReDialog :width="750" :height="540" :models="DialogVisible" @Closes="close_from(Refstubim_from)">
      <template #header>
        <h2 style="text-align: center;">保险设计</h2>
      </template>
      <template #main>
        <el-scrollbar height="500px">
          <el-form label-width="130px" :model="insuranceForm" :inline="true" :rules="rules" ref="Refstubim_from"
            class="Refstubim_from">
            <el-form-item label="保险产品名称" prop="insuranceName">
              <el-input v-model.trim="insuranceForm.insuranceName" :disabled="insDisabled" class="!w-[190px]" />
            </el-form-item>
            <el-form-item label="创建时间" prop="createDate">
              <el-date-picker v-model="insuranceForm.createDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                size="default" :disabled="insDisabled" class="!w-[190px]" />
            </el-form-item>
            <el-form-item label="保险类型" prop="insuranceType">
              <el-select v-model="insuranceForm.insuranceType" value-key="typeId" class="!w-[190px]"
                :disabled="insDisabled">
                <el-option v-for="(item, l) in SeleteInsuranceType" :key="l" :label="item.typeValue" :value="item"
                  @click="changeinsuranceType(item)" />
              </el-select>
            </el-form-item>
            <el-form-item label="保险期限" prop="insuranceOutTime">
              <el-select v-model="insuranceForm.insuranceOutTime" :disabled="insDisabled || isinsuranceOutTime"
                class="!w-[190px]">
                <el-option label="一年" value="一年" />
                <el-option label="十年" value="十年" />
                <el-option label="二十年" value="二十年" />
                <el-option label="三十年" value="三十年" />
                <el-option label="终身" value="终身" />
              </el-select>
            </el-form-item>
          </el-form>
          <PureTableBar title="" class="bx_PureTableBar">
            <template #buttons>
              <el-button type="primary" @click="AddInsuranceList()"
                :disabled="!insuranceForm.insuranceType || insDisabled">添加 </el-button>
            </template>
            <template v-slot="{ size, checkList }">
              <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading2"
                size="small" :data="dataList2" max-height="300" :columns="columns2" :checkList="checkList"
                :header-cell-style="{
                  background: 'var(--el-table-row-hover-bg-color)',
                  color: 'var(--el-text-color-primary)'
                }">
                <template #operation="{ row }">
                  <el-button class="reset-margin" text size="small" type="danger" @click="DeleteDetails(row)"
                    :disabled="insDisabled">删除</el-button>
                  <!-- <el-popconfirm title="是否确认删除?" @confirm="DeleteDetails(row)">
                  <template #reference>
                    <el-button class="reset-margin" text size="small" type="danger" :disabled="insDisabled">删除</el-button>
                  </template>
                </el-popconfirm> -->
                </template>
              </pure-table>
            </template>
          </PureTableBar>
        </el-scrollbar>
      </template>
      <template #footer>
        <el-button type="primary" @click="stubim_from(Refstubim_from)" :loading="btnloading" :disabled="insDisabled">确定
        </el-button>
        <el-button @click="close_from(Refstubim_from)"> 取消 </el-button>
      </template>
    </ReDialog>

    <!-- 点击新增后 -- 新增保障项目 -->

    <ReDialog :width="400" :height="250" :models="SecurityItemVisible"
      @Closes="closeRefAddInsuranceForm(RefAddInsuranceForm)">
      <template #header>
        <h2 style="text-align: center;">产品信息</h2>
      </template>
      <template #main>
        <el-form label-width="110px" :model="AddInsuranceForm" ref="RefAddInsuranceForm" :inline="true" :rules="AddRules">
          <el-form-item label="保障项目" prop="SecurityItem">
            <el-select v-model="AddInsuranceForm.SecurityItem" value-key="typeId">
              <el-option v-for="(item, l) in SeleteSecurityItem" :key="l" :label="item.typeValue" :value="item"
                @click="changeSeleteSecurityItem(item)" />
            </el-select>
          </el-form-item>
          <el-form-item label="保险范围" prop="InsuranceCoverage">
            <el-select v-model="AddInsuranceForm.InsuranceCoverage" value-key="typeId">
              <el-option v-for="(item, l) in SeleteInsuranceCoverage" :key="l" :label="item.typeValue" :value="item"
                @click="changeInsuranceCoverage(item.isDelete, item)" :disabled="item.isDelete" />
            </el-select>
          </el-form-item>
          <!-- v-if="!['交强险', '车上人员责任险'].includes(AddInsuranceForm?.SecurityItem?.typeValue)" -->
          <el-form-item label="保额选项" prop="PremiumOption"
            v-if="!['交强险', '车上人员责任险'].includes(AddInsuranceForm?.SecurityItem?.typeValue)">
            <el-select v-model="AddInsuranceForm.PremiumOption" multiple collapse-tags value-key="typeId">
              <el-option v-for="(item, l) in SeletePremiumOption" :key="l" :label="item.typeValue" :value="item" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="StubimRefAddInsuranceForm(RefAddInsuranceForm)" type="primary"> 确定 </el-button>
        <el-button @click="closeRefAddInsuranceForm(RefAddInsuranceForm)"> 取消 </el-button>
      </template>
    </ReDialog>

  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

:deep(.bx_PureTableBar) {
  margin-top: 0px;
}

:deep(.el-dialog__footer) {
  text-align: center
}

:deep(.Refstubim_from) {
  .el-form-item {
    width: 340px;
    margin-right: 0px;
  }
}
</style>
